<!--  首页组件-->
<template>
  <div class="home-page">
    <!-- 首页组件 -->
    <!-- 头部 -->
    <home-header></home-header>
    <!-- 导航 -->
    <div class="navbar" ref="navbar">
      <!-- 导航部分 -->
      <ly-tab
        v-model="selectedId"
        :items="items"
        :options="options"
        @change="changeTabs"
      >
      </ly-tab>
      <!-- 分类 -->
      <div class="category" @click="toCategory">
        <i class="iconfont icon-tubiao13"></i>
        <span>分类</span>
      </div>
    </div>
    <!-- 主体部分内容 -->
    <!-- <home-index></home-index> -->
    <!-- 放值动态组件的内容 -->
    <component :is="homeComponent"></component>
    <div style="height: 2000px"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HomeHeader from "./components/HomeHeader";
import HomeIndex from "./components/HomeIndex";
import HomeCategory from "./components/HomeCategory";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { HomeHeader, HomeIndex, HomeCategory },
  data() {
    //这里存放数据
    return {
      selectedId: 0,
      items: [
        { label: "首页" },
        { label: "家用电器" },
        { label: "鞋靴箱包" },
        { label: "男装女装" },
        { label: "个护美妆" },
        { label: "手机数码" },
        { label: "电脑办公" },
        { label: "家居家纺" },
        { label: "个人化妆" },
      ],
      options: {
        activeColor: "#fff",
        // 可在这里指定labelKey为你数据里文字对应的字段名
      },
      homeComponent: "HomeIndex",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toCategory() {
      console.log(this.$router.push("/category"));
    },
    // 触发点击事件
    changeTabs(item, index) {
      // console.log(index);
      console.log("点击内容" + index);
      if (index == 0) {
        this.homeComponent = "HomeIndex";
      } else {
        this.homeComponent = "HomeCategory";
      }
    },
    scrollhome() {
      if (document.documentElement.scrollTop >= 95) {
        this.$refs.navbar.className = "navbar navbar-fixed";
      } else {
        this.$refs.navbar.className = "navbar";
      }
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    document.addEventListener("scroll", this.scrollhome);
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.scrollhome);
  },
};
</script>
<style lang="less">
.home-page {
  .navbar {
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    width: 100%;
    height: 4.4rem;
    // background-color: #e22c2c;
    background-color: transparent;
    position: relative;
    top: 0;
    left: 0;
    z-index: 999;
    // 导航消除原本样式增加新样式
    .ly-tab {
      width: 83%;
      .ly-tabbar {
        border-bottom: 0px solid #eee;
        box-shadow: 0 0 0 0 #eee;
        background-color: transparent;
        .ly-tab-item {
          color: #fff;
          padding: 0 0.15rem;
        }
      }
    }
    .category {
      color: #fff;
      width: 15%;
      height: 2.5rem;
      font-size: 1.4rem;
      line-height: 2.5rem;
      i {
        padding-left: 0.5rem;
        margin-right: 0.3rem;
      }
    }
  }
  // 导航滚动的类名
  .navbar-fixed {
    position: fixed;
    background-color: #e22c2c;
    top: 5rem;
  }
}
</style>